<template>
<div>
  <div style="background-color: #9f7650;height: 120px;width:100%">
    <el-link icon="el-icon-caret-left" style="float: left;margin:50px 0 0 50px;color:white" :underline="false" href="/">返回首页</el-link>
    <!--登陆前显示的-->
    <div style="display: inline" v-if="unLogin">
      <el-link icon="el-icon-user-solid" style="float: right;margin:50px 20px 0 0;color:white" :underline="false"
               @click="reg()"
      >用户注册</el-link>
      <el-link icon="el-icon-user" style="float: right;margin:50px 20px 0 0;color:white" :underline="false"
                @click="log()"
      >用户登录</el-link>
    </div>
    <!--登陆前显示的-->
    <!--登陆后显示的-->
    <div style="display: inline" v-else>
      <el-link icon="el-icon-message-solid" style="float: right;margin:50px 20px 0 0;color:white" :underline="false" @click="logout">退出登陆</el-link>
      <el-link icon="el-icon-document-copy" style="float: right;margin:50px 20px 0 0;color:white" :underline="false" href="/customer/orders">订单查询</el-link>
      <el-link icon="el-icon-s-order" style="float: right;margin:50px 20px 0 0;color:white" :underline="false" href="/customer/info">用户详情</el-link>
      <el-link icon="el-icon-s-custom" style="float: right;margin:50px 20px 0 0;color:white" :underline="false">欢迎回来，{{user.nickname}}</el-link>
    </div>
    <!--登陆后显示的-->
    <!--logo-->
    <div>
      <img src="/imgs/logo2.png" style="width:150px;margin-top:10px">
    </div>
    <!--logo-->
  </div>
  <div>
    <el-row style="">
      <el-col :span="14" style="height:900px;box-sizing: border-box">
        <el-row style="height:600px;width: 100%;">
         <el-col :span="24" style="padding: 10px;box-sizing: border-box">
<!--           <img :src="picture" style="width:100%;z-index: 5">-->
           <img :src="picture" alt="" style="width:100%;height:550px">
         </el-col>
        </el-row>
        <el-row style="height:30%">
         <el-col :span="24" style="padding: 10px;box-sizing: border-box">

           <div style="align-content: center;width:100%;overflow-x: auto;height:280px">
             <div style="white-space: nowrap;font-size: 0;height: 260px;">
               <div style="white-space: normal;overflow: hidden;display: inline-block;width: 380px;height: 100%;" v-for="item in url">
                 <img  :src="item.path" alt="" style="width:380px;height: 240px;border:6px solid white" @click="picDetail(item.path)">
               </div>
             </div>
<!--             <el-carousel :interval="4000" type="card" height="240px" arrow="never" @change="changePicture">
               <el-carousel-item v-for="item in url" :key="item.id" style="width: 380px">
                 <img :src="item.path" alt="" @click="picDetail(item.path)" style="height:240px;width:380px">
               </el-carousel-item>
             </el-carousel>-->
           </div>
         </el-col>
        </el-row>
      </el-col>
      <el-col :span="6" style="height:900px;" id="el-detail">
        <div style="background-color: #efe6d5;padding: 20px 0 20px 40px">
          <el-row :gutter="10">
            <el-col :span="12" style="text-align: left;">
              <a href="javascript:void(0)" @click="buy()" style="text-decoration: none;color:#a78160;font-size: 18px;font-weight: bold">立即预定</a>
            </el-col>
            <el-col :span="12" style="text-align: left;font-size:12px;color:#614c41;font-weight: bold">预定次数：<span style="font-size: 15px">{{roomDetail.orderNums}}</span></el-col>
          </el-row>
        </div>
        <div style="background-color: #efe6d5;padding: 20px 0 20px 40px">
          <el-row :gutter="10">
            <el-col :span="12" style="text-align: left;font-size:12px;color:#614c41;font-weight: bold">空余房间：<span style="font-size: 15px">{{roomDetail.spareRoomCount}}</span></el-col>
            <el-col :span="12" style="text-align: left;font-size:12px;color:#614c41;font-weight: bold">点击次数：<span style="font-size: 15px">{{roomDetail.clickNums}}</span></el-col>
          </el-row>
        </div>
        <div style="background-color: #efe6d5;padding: 20px 0 20px 40px">
          <el-row :gutter="10">
            <el-col :span="12" style="text-align: left;font-size:12px;color:#614c41;font-weight: bold">房型价格：<span style="font-size: 15px">{{roomDetail.price}}（元/日）</span></el-col>
            <el-col v-if="false" :span="12" style="text-align: left;font-size:12px;color:#614c41;font-weight: bold">房型优惠价格：<span style="font-size: 15px">{{roomDetail.clickNums}}</span></el-col>
          </el-row>
        </div>
        <div style="padding: 20px 0 20px 40px;background-color: white;box-sizing: border-box;" class="el-detail1">
          <p style="font-size:18px;color:#503a27;font-weight: bold;text-align: left;margin-top: 20px">室内用品:</p>
          <el-row :gutter="10" style="">
            <el-col :span="12" style="text-align: left;margin-top:20px;color:rgb(134,101,46)" v-for="item in roomDetail.art">{{item}}</el-col>
          </el-row>
        </div>
        <div style="background-color: #d7c8ac;padding:  20px 0 20px 40px;box-sizing: border-box" class="el-detail1">
          <p style="font-size:18px;color:#503a27;font-weight: bold;text-align: left;margin-top: 20px">客房设施:</p>
          <el-row :gutter="10" style="" >
            <el-col :span="12" style="text-align: left;margin-top:20px;color:#7b4f16" v-for="item in roomDetail.equ">{{ item }}</el-col>
          </el-row>
        </div>
        <div style="padding:  20px 0 20px 40px;background-color: white;box-sizing: border-box" class="el-detail1">
          <p style="font-size:18px;color:#503a27;font-weight: bold;text-align: left;margin-top: 20px">客房服务:</p>
          <el-row :gutter="10" style="">
            <el-col :span="12" style="text-align: left;margin-top:20px;color:rgb(134,101,46)"  v-for="item in roomDetail.ser">{{ item }}</el-col>
          </el-row>
        </div>

      </el-col>
      <el-col :span="4" style="height:900px;background-color: #d5a991;">

      </el-col>
    </el-row>
  </div>
  <div style="width:100%;height:120px;background-color: #403f3f;padding-top: 50px">
    <p align="center" style="color:#dddada;">Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备
      11010802029572号</p>
    <p align="center" style="color:#dddada;">涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
    <p align="center" style="color:#dddada;">达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>

  </div>

</div>
</template>

<script>
export default {
  data(){
    return{
        user:{},
        roomId:'',
      roomDetail:{
        art:[],
        equ:[],
        ser:[],
      },
      url:[
        {id:1,path:"http://localhost:9010/imgs/4-8.jpg"},
        {id:2,path:"http://localhost:9010/imgs/4-9.jpg"},
        {id:3,path:"http://localhost:9010/imgs/4-4.jpg"},
        {id:4,path:"http://localhost:9010/imgs/4-5.jpg"},
        {id:5,path:"http://localhost:9010/imgs/4-6.jpg"},
        {id:6,path:"http://localhost:9010/imgs/4-7.jpg"},
      ],
      picture:"",

      unLogin:true,
    }
  },
  methods:{
    /*轮播图切换事件-----------------------------*/
    changePicture(){
      /*console.log(1)*/
    },
    picDetail(path){
      console.log(path);
      this.picture=path;
    },
    loadPicture(){
      if(this.url!=null){
        this.picture=this.url[0].path
      }
    },
    /*轮播图切换事件-----------------------------*/

    /*退出登陆的方法-----------------------------*/
    logout(){
      this.$confirm('您确定要退出登陆吗', '提示', {
        confirmButtonText: '退出登陆',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        let url="http://localhost:9080/user/logout"
        this.axios.post(url).then((response)=>{
        })
        this.unLogin = true;
        this.keepLogin=0;
        this.user=null;
        localStorage.removeItem("user")
        this.$router.push("/")
      }).catch(() => {
      });
    },
    /*退出登陆的方法-----------------------------*/

    loadDetail(){
      this.roomId=localStorage.getItem("roomId");
      console.log("roomId:",this.roomId);
      this.loadRoomDetail();
      this.loadUser();
      this.loadPicture();
    },
    loadUser(){
      let u=localStorage.getItem("user")
      if(u){
        this.user=JSON.parse(u);
        this.unLogin=false;
      }
    },
    loadRoomDetail(){
      let url="http://localhost:9080/roomType/"+this.roomId+"/get"
      console.log("url="+url);
      this.axios.get(url).then((response)=>{
        let responseBody=response.data;
        this.roomDetail=responseBody.data;
        /*let art=this.roomDetail.article1+","+this.roomDetail.article2+","+
            this.roomDetail.article3+","+ this.roomDetail.article4+","+
            this.roomDetail.article5+","+this.roomDetail.article6
        let equ=this.roomDetail.equipment1+","+this.roomDetail.equipment2+","+
            this.roomDetail.equipment3+","+this.roomDetail.equipment4+","+
            this.roomDetail.equipment5+","+this.roomDetail.equipment6+","+
            this.roomDetail.equipment7
        let ser=this.roomDetail.services1+","+this.roomDetail.services2+","+
            this.roomDetail.services3+","+this.roomDetail.services4+","+
            this.roomDetail.services5+","+this.roomDetail.services6
        console.log(this.roomDetail);
         let art2=art.split(",");
         let equ2=equ.split(",");
          let ser3=ser.split(",");*/
        let ar=this.roomDetail.articles.split(",")
        this.roomDetail.art=ar;
        let eq=this.roomDetail.equipments.split(",")
        this.roomDetail.equ=eq;
        let se=this.roomDetail.services.split(",")
        this.roomDetail.ser=se;
        console.log(this.roomDetail.art);
        console.log(this.roomDetail.equ);
        console.log(this.roomDetail.ser);
      })
    },
    /*跳转到首页并注册的方法--------------------------*/
    reg(){
      localStorage.setItem("detail-reg","1")
      localStorage.setItem("roomId",this.roomId)
      this.$router.push("/")

    },
    log(){
      localStorage.setItem("detail-log","2")
      localStorage.setItem("roomId",this.roomId)
      this.$router.push("/")
    },
    /*刷新---------------------------------*/
    // f5(){
    //   if(this.user.nickname==null){
    //     if(this.unLogin){
    //       if(localStorage.getItem("detail-reg")){
    //         localStorage.removeItem("detail-reg")
    //         console.log("OK")
    //         location.reload();
    //       }
    //       if(localStorage.getItem("detail-log")){
    //         localStorage.removeItem("detail-log")
    //         console.log("OK")
    //         location.reload();
    //       }
    //     }
    //   }
    // }
    /*检测是否登录然后跳转到预定页面*/
    buy(id){
      if(this.user.nickname!=null){
        this.$router.push("/customer/order/add-new")
      }else{
        this.$message({
          message: "请登录！",
          type: 'error'
        });
      }
    }
  },
  mounted() {
    this.loadDetail();
    //this.f5()

  },

}
</script>
<style>

#el-detail>.el-detail1:hover{
  transition: all 0.3s;
  transform: scale(1.1);
  box-shadow: 4px 4px 3px 0 rgba(100, 100, 100, 0.8)
}
#el-detail>.el-detail1:active{
  transition: all 0.3s;
  transform: scale(1);
  box-shadow: 4px 4px 3px 0 rgba(100, 100, 100, 0.8)
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

</style>
